Biggest Alpha - Tech Repair Service Platform

A modern, full-stack web application for tech repair service management

Live Demo • Features • Tech Stack • Getting Started

---

📖 About

Biggest Alpha is a comprehensive tech repair service platform that enables customers to book repairs, track their device status, and manage their service requests. The platform includes a full-featured admin dashboard for managing repairs, customers, and service operations.

Author: AHMED OLAYINKA

---

✨ Features

Customer Features

• 🎯 Repair Booking System - Easy-to-use form for scheduling device repairs
• 📱 Multi-Device Support - Smartphone, Laptop, Tablet, Smart Watch, and custom devices
• 🔍 Repair Tracking - Real-time status tracking with unique confirmation codes
• 📋 Service Catalog - Dynamic service listings with detailed descriptions
• 💳 Membership Plans - Silver, Gold, and Consultation tiers
• 📧 Email Notifications - Automated confirmation and status update emails
• 📱 Responsive Design - Fully optimized for mobile, tablet, and desktop

Admin Features

• 🎛️ Admin Dashboard - Comprehensive overview of all repairs and customers
• 📊 Repair Management - Update status, add notes, and manage workflow
• 👥 Customer Management - View customer history and search functionality
• 📈 Status Tracking - Track repairs through: Received → In Progress → Ready for Pickup → Completed
• 🔐 Secure Authentication - Protected admin routes with Supabase Auth

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 15.5.7 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui (Radix UI primitives)
• Animations: Framer Motion
• Form Handling: React Hook Form + Zod validation

Backend

• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Email Service: Resend API & Nodemailer
• API Routes: Next.js API Routes & Server Actions

Development Tools

• Package Manager: npm
• Linting: ESLint
• Type Checking: TypeScript
• Version Control: Git

---

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Supabase account (for database)
• Resend API key (for email) or SMTP credentials

Installation

1. Clone the repository

   git clone https://github.com/Fixit123/Biggestalpha_webapp.git
   cd Biggestalpha_webapp

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   # Email (Resend)
   RESEND_API_KEY=your_resend_api_key
   RESEND_FROM_EMAIL=noreply@yourdomain.com
   
   # Email (Alternative - SMTP)
   SMTP_HOST=smtp.example.com
   SMTP_PORT=587
   SMTP_USER=your_email@example.com
   SMTP_PASS=your_password
   SMTP_FROM=noreply@yourdomain.com
   
   # Site URL
   NEXT_PUBLIC_SITE_URL=https://yourdomain.com

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

---

📁 Project Structure

Biggestalpha_webapp/
├── app/                    # Next.js App Router
│   ├── about/             # About page
│   ├── admin/             # Admin dashboard
│   │   ├── customers/    # Customer management
│   │   ├── repairs/       # Repair management
│   │   └── settings/      # Admin settings
│   ├── api/               # API routes
│   │   ├── book-repair/   # Booking endpoint
│   │   ├── contact/       # Contact form
│   │   └── repairs/       # Repair status updates
│   ├── book-repair/       # Booking page
│   ├── contact/           # Contact page
│   ├── services/          # Services listing
│   ├── track/             # Repair tracking
│   └── components/        # Page-specific components
├── components/            # Reusable components
│   ├── ui/                # shadcn/ui components
│   └── ...                # Custom components
├── utils/                 # Utility functions
│   ├── supabase.ts       # Supabase client
│   ├── send-email.ts     # Email utilities
│   └── email-templates.ts
├── types/                 # TypeScript types
├── public/                # Static assets
└── styles/                # Global styles

---

🔒 Security

This application implements comprehensive security measures:

• ✅ Next.js 15.5.7 - Latest patched version (CVE-2025-55182 fixed)
• ✅ HTTP Security Headers - HSTS, CSP, X-Frame-Options, and more
• ✅ Input Validation - Zod schema validation on all forms
• ✅ Secure Authentication - Supabase Auth with protected routes
• ✅ Environment Variables - Sensitive data stored securely
• ✅ Type Safety - Full TypeScript coverage

---

📝 Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint

---

🎨 Key Pages

• Home (/) - Landing page with featured services
• Services (/services) - Complete service catalog
• Book Repair (/book-repair) - Repair booking form
• Track Repair (/track) - Status tracking with confirmation code
• Membership (/membership) - Membership plans and pricing
• Contact (/contact) - Contact form
• About (/about) - About page
• Admin Dashboard (/admin) - Admin panel (protected)

---

🗄️ Database Schema

Main Tables

• repair_bookings - Customer repair requests
• services - Available repair services
• status_history - Repair status change history

---

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy!

The project is configured for Vercel deployment with automatic builds.

Docker

# Build image
docker build -t biggest-alpha .

# Run container
docker run -p 3000:3000 biggest-alpha

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is private and proprietary.

---

👤 Author

AHMED OLAYINKA

• GitHub: @Fixit123
• Project: Biggestalpha_webapp
• Live Site: biggestalpha-webapp.vercel.app

---

🙏 Acknowledgments

• Next.js - The React Framework
• Supabase - Open source Firebase alternative
• shadcn/ui - Beautifully designed components
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library

---

Built with ❤️ by AHMED OLAYINKA

⭐ Star this repo if you find it helpful!